<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="__STATIC__/css/mui.min.css"/>
    <link rel="stylesheet" href="__STATIC__/css/common.css">
    <link rel="stylesheet" href="__STATIC__/css/module.css"/>
    <script src="__STATIC__/js/jquery.min.js"></script>
    <script src="__STATIC__/js/mui.min.js"></script>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
    <h1 class="mui-title">
        <a class="product-tab active" href="javascript:">商品</a>
        <a class="detailpic-tab" href="javascript:">详情</a>
        <a class="pingjiabox-tab" href="javascript:">评价</a>
    </h1>
    <a href="#" class="top-more mui-pull-right"></a>
    <a href="#share" class="top-share mui-pull-right"></a>
</header>


<!-- 引入商品详情页导航 -->
{include file="Index/shownav"}


<div class="mui-content detail-box">
    <div class="productbox">
        <div class="mui-slider" id="slider">
            <div class="mui-slider-group mui-slider-loop">
                <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
                <!--<div class="mui-slider-item">-->
                    <!--<img src="__STATIC__/images/shuiguo.jpg">-->
                <!--</div>-->
                <!-- 第一张 -->
                {volist name="goods.picarr" id="vo"}
                <div class="mui-slider-item">
                    <img src="__ROOT__/{$vo}">
                </div>
                {/volist}
                <!--&lt;!&ndash; 第二张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<img src="__STATIC__/images/shuiguo1.jpg">-->
                <!--</div>-->
                <!--&lt;!&ndash; 第三张 &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<img src="__STATIC__/images/shuiguo2.jpg">-->
                <!--</div>-->
                <!--&lt;!&ndash; 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) &ndash;&gt;-->
                <!--<div class="mui-slider-item">-->
                    <!--<img src="__STATIC__/images/shuiguo.jpg">-->
                <!--</div>-->
            </div>
            <div class="mui-slider-indicator">
                <div class="mui-indicator mui-active"></div>
                <div class="mui-indicator"></div>
                <div class="mui-indicator"></div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                var slider = mui("#slider");
                slider.slider({
                    interval: 5000
                });
            }
        </script>
        <h1>{$goods.goods_name}</h1>
        <div class="description">
            {$goods.goods_desc}
        </div>
        <div class="pricet">
            {if condition="$goods.buytype eq '1'"}
            ￥{$goods.price} <small>/个</small>
            {else}
            ￥{$goods.price} <small>/斤</small>
            {/if}
        </div>
        <div class="detail-box-item select-a mart10">
            <a class="mui-navigate-right">领券</a>
        </div>
        <div class="detail-box-item select-a">
            <a class="mui-navigate-right">促销 <span><i>满减</i>满100减5元</span></a>
        </div>
        <div class="detail-box-item select-a">
            <a href="javascript:" class="mui-navigate-right" id="ClickMe">已选 <span>1件</span></a>
        </div>
        <div class="detail-box-item select-a">
            <a>运费 <span>在线支付免运费</span></a>
        </div>
        <div class="detail-box-item mart10">
            <p>温馨提示：</p>
            <div>这里就写对于商品的额一些温馨提示，写对于商品的额一些温馨提示，这里就写对于商品的额一些温馨提示。</div>
        </div>
    </div>
    <div class="detail-box-item mart10 pingjiabox">
        <div class="color-999">评价晒单 <span class="color-333">256人评论</span></div>
        <div class="pingjia-item mart20">
            <div class="star star5 mui-pull-left"></div>
            <div class="info mui-pull-right color-999">s***g <span class="padl10">2015-12-24</span></div>
            <div class="mui-clearfix"></div>
            <p>这个感觉还挺不错的，以后还来，真的是大赞！</p>
            <ul class="picture">
                <li><img src="__STATIC__/images/js.jpg" class="img-responsive" alt=""></li>
                <li><img src="__STATIC__/images/js1.jpg" class="img-responsive" alt=""></li>
                <li><img src="__STATIC__/images/js2.jpg" class="img-responsive" alt=""></li>
            </ul>
        </div>
        <div class="pingjia-item mart20">
            <div class="star star4 mui-pull-left"></div>
            <div class="info mui-pull-right color-999">s***g <span class="padl10">2015-12-24</span></div>
            <div class="mui-clearfix"></div>
            <p>这个感觉还挺不错的，以后还来，真的是大赞！</p>
        </div>
        <div class="more-pl">
            <a href="#">查看全部评论 <span class="mui-icon mui-icon-arrowright font16"></span></a>
        </div>.
    </div>
    <div class="tuijianbox">
        <div class="detail-tj-list mart10">
            <div class="tab mui-text-center">
                <a onclick="mytab(1)" class="tabt tabt1 on" href="javascript:">猜你喜欢</a>
                <a onclick="mytab(2)" class="tabt tabt2" href="javascript:">排行榜</a>
            </div>
            <div class="tabc tabc1">
                <ul class="tp-img-wrap mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/yingtao.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/shiliu.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/mihoutao.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/huolongguo.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                </ul>
                <a href="#" class="color-666 mui-text-center mui-block pad10 mart10 font14">查看更多猜你喜欢</a>
            </div>
            <div class="tabc tabc2" style="display: none;">
                <ul class="tp-img-wrap mui-table-view">
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售1件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                    <li class="mui-table-view-cell">
                        <a href="#">
                            <img src="__STATIC__/images/product.jpg" alt="">
                            <div class="info">
                                <h4>新鲜水果车厘子双J级 进口大樱桃2斤装 双J车厘子2斤装</h4>
                                <div class="price">
                                    ￥20.00 <p>已售0件</p>
                                </div>
                            </div>
                        </a>
                        <a class="joincart" href="#"><img src="__STATIC__/images/list-cart.png" alt=""></a>
                    </li>
                </ul>
                <a href="#" class="color-666 mui-text-center mui-block pad10 mart10 font14">查看更多排行榜</a>
            </div>
        </div>
        <div class="detail-box-item select-666 mui-text-center mart10">
            <a class="detailpic-tab" href="javascript:">查看图文详情 <span class="mui-icon mui-icon-arrowdown font14"></span></a>
        </div>
    </div>
    <div class="detailpicbox" style="display: none;">
        <img src="__STATIC__/images/detailpro.jpg" class="width-full" alt="">
    </div>
</div>
<div id="share" class="mui-popover mui-popover-action mui-popover-bottom">
    <ul class="mui-table-view mui-grid-view mui-grid-9" style="margin: 0; border-radius: 0;">
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <a href="#">
                <span class="ico ico1"></span>
                <div class="mui-media-body">新浪</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <a href="#">
                <span class="ico ico2"></span>
                <div class="mui-media-body">QQ</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <a href="#">
                <span class="ico ico3"></span>
                <div class="mui-media-body">QQ空间</div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
            <a href="#">
                <span class="ico ico4"></span>
                <div class="mui-media-body">微信</div>
            </a>
        </li>
    </ul>
</div>
<div id="goodcover"></div>
<div id="spec">
    <div class="title">
        <img class="mui-pull-left" src="{$goods.picarr.0}" alt="">
        <p class="mui-pull-left">
            {if condition="$goods.buytype eq '1'"}
            <span id="price-1">￥{$goods.price}/颗</span>
            {else}
            <span id="price-2">￥{$goods.price}/斤</span>
            {/if}
            <br/>
            商品编号：{$goods.goods_sn??''}
        </p>
        <div class="mui-clearfix"></div>
        <a class="closespec" href="javascript:"><span class="mui-icon mui-icon-close"></span></a>
    </div>
    <table>
        <tr>
            <td>规格</td>
            <td>
                {if condition="$goods.buytype eq '1'"}
                <span id="guige-1">{$goods.short_name}选重（按颗算）</span>
                {else}
                <span id="guige-2">{$goods.short_name}选重（按斤算）</span>
                {/if}
                <input type="hidden" id="buy_type" value="{$goods.buytype}" />
            </td>
        </tr>
        <tr>
            <td>数量</td>
            <td>
                <div class="mui-numbox" data-numbox-min='1'>
                    <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
                    <input class="mui-input-numbox" id="buy_num" type="number" value="1"/>
                    <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
                </div>
            </td>
        </tr>
    </table>
    <p class="tip">注：因本商品无法每次都精确到整斤，如超出所选范围，以实际重量为准</p>
    <a class="joincart" href="javascript:addCart('{$goods.goods_id}');">加入购物车</a>
</div>
<a class="gotop" href="javascript:">返回<br/>顶部</a>
<script>
    $(function() {
        $('#ClickMe').click(function() {
            $('#goodcover').fadeIn();
            $('#spec').addClass("active");
        });
        $('#goodcover,.closespec').click(function() {
            $('#spec').removeClass("active");
            $('#goodcover').fadeOut();
        });
        $(".gotop").click(function () {
            $("html,body").animate({
                "scrollTop":0
            })
        });
        $(".product-tab").click(function () {
            $(".product-tab").addClass("active").siblings().removeClass("active");
            $(".productbox,.pingjiabox,.tuijianbox").show();
            $(".detailpicbox").hide();
        });
        $(".detailpic-tab").click(function () {
            $(".detailpic-tab").addClass("active").siblings().removeClass("active");
            $(".productbox,.pingjiabox,.tuijianbox").hide();
            $(".detailpicbox").show();
        });
        $(".pingjiabox-tab").click(function () {
            $(".pingjiabox-tab").addClass("active").siblings().removeClass("active");
            $(".pingjiabox").show();
            $(".productbox,.detailpicbox,.tuijianbox").hide();
        })
    })
    function mytab(e) {
        $(".tabt").removeClass("on");
        $(".tabt"+e).addClass("on");
        $(".tabc").hide();
        $(".tabc"+e).show();
    }

    //选购方式切换
    function chprice(type, obj) {
        if(type==1){
            $('#guige-1').attr('style','background-color:#ee0000;radius:5px;');
            $('#guige-2').attr('style','');
            $('#price-1').attr('style','display:block');
            $('#price-2').attr('style','display:none');
        } else {
            $('#guige-2').attr('style','background-color:#ee0000;radius:5px;');
            $('#guige-1').attr('style','');

            $('#price-2').attr('style','display:block');
            $('#price-1').attr('style','display:none');
        }
        $('#buy_type').val(type);
        return true;
    }

    // 添加商品到购物车
    function addCart(id) {
        var buy_type = $('#buy_type').val();
        var buy_num = $('#buy_num').val();
        var uri = "__URL__/addCartOne";
        $.getJSON(uri,{id:id,buy_type:buy_type,buy_num:buy_num},function (res) {
            if(res.code==0){
                // 添加购物车成功跳转
                window.location.href="{:url('index/goods/addCartSucc')}";
            } else {
                alert(res.msg);
                return false;
            }
        });
    }

</script>
</body>
</html>